<div class="search-filter" ng-class="lxSearchFilter.getClass()">
    <div class="search-filter__container">
        <div class="search-filter__button">
            <lx-button type="submit" lx-size="l" lx-color="{{ lxSearchFilter.color }}" lx-type="icon" ng-click="lxSearchFilter.openInput()">
                <i class="mdi mdi-magnify"></i>
            </lx-button>
        </div>

        <div class="search-filter__input" ng-transclude></div>

        <div class="search-filter__clear">
            <lx-button type="button" lx-size="l" lx-color="{{ lxSearchFilter.color }}" lx-type="icon" ng-click="lxSearchFilter.clearInput()">
                <i class="mdi mdi-close"></i>
            </lx-button>
        </div>
    </div>

    <div class="search-filter__loader" ng-if="lxSearchFilter.isLoading">
        <lx-progress lx-type="linear"></lx-progress>
    </div>

    <lx-dropdown id="{{ lxSearchFilter.dropdownId }}" lx-effect="none" lx-width="100%" ng-if="lxSearchFilter.autocomplete">
        <lx-dropdown-menu class="search-filter__autocomplete-list">
            <ul>
                <li ng-repeat="item in lxSearchFilter.autocompleteList track by $index">
                    <a class="search-filter__autocomplete-item"
                       ng-class="{ 'search-filter__autocomplete-item--is-active': lxSearchFilter.activeChoiceIndex === $index }"
                       ng-click="lxSearchFilter.selectItem(item)"
                       ng-bind-html="item | lxSearchHighlight:lxSearchFilter.modelController.$viewValue:lxSearchFilter.icon"></a>
                </li>
            </ul>
        </lx-dropdown-menu>
    </lx-dropdown>
</div>